<template>
  <h1>分类搜索</h1>
  <hr />
  <el-form :inline="true" label-width="120px">
    <el-form-item label="分类：">
      <el-select
        v-model="query.category"
        filterable
        clearable
        placeholder="分类搜索"
      >
        <el-option
          v-for="item in category"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="搜索条件：">
      <el-input v-model="query.search" placeholder="查询条件仅名称和品牌可查" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSearch">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="goodsList" style="width: 100%" height="90%">
    <el-table-column fixed prop="proid" label="商品编号" width="200" />
    <el-table-column label="图片" width="200">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" width="320" />
    <el-table-column prop="brand" label="品牌" width="80" />
    <el-table-column prop="originprice" label="价格" width="80" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="sales" label="销量" width="110" />
    <el-table-column prop="stock" label="库存" width="110" />
    <el-table-column label="是否推荐" width="100">
      <template #default="scope">
        <el-switch
          style="--el-switch-on-color: #76b1e1"
          v-model="scope.row.isrecommend"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { pro_getCategory, pro_serchPro } from "../../../utils/api";

// 商品数据
interface IGoods {
  proid: string;
  banners: [];
  category: string;
  brand: string;
  proname: string;
  originprice: number;
  sales: number;
  stock: number;
  desc: string;
  issale: number;
  isrecommend: number;
  discount: number;
  isseckill: number;
  img1: string;
  img2: string;
  img3: string;
  img4: string;
}
const goodsList = reactive<IGoods[]>([]);

// 定义查询条件
const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});

// 获取搜索信息
const getSearch = () => {
  pro_serchPro({category:query.category,search:query.search}).then((res) => {
    if (res.data.code === "200") {
      goodsList.length = 0;
      goodsList.push(...res.data.data);
    }
  });
};
getSearch();

// 获取商品分类信息
const category = reactive<IGoods[]>([]);

const getCategory = () => {
  pro_getCategory().then((res) => {
    if (res.data.code === "200") {
      category.length = 0;
      category.push(...res.data.data);
    }
  });
};
getCategory();

const value = ref("");
</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>